<div id="os-settings-page" v-cloak>
  <div purpose="page-container">
    <div purpose="page-content">
      <docs-nav-and-search  current-section="controls" :algolia-public-key="algoliaPublicKey" ></docs-nav-and-search>
      <div purpose="platform-filters" class="d-flex justify-content-center"  >
        <div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
          <h1 class="d-flex align-items-center">
          <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
          <span class="d-none d-md-inline">Apple</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
          <h1 class="d-flex align-items-center">
            <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
            <span class="d-none d-md-inline">Windows</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']"  class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
          <h1 class="d-flex align-items-center">
            <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
            <span class="d-none d-md-inline">Linux</span>
          </h1>
        </div>
      </div>
      <div purpose="sidebar-and-content">
        <div purpose="sidebar" class="d-lg-flex d-none">
          <a purpose="sidebar-link" :href="'/mdm-commands#'+selectedPlatform">MDM commands</a>
          <a purpose="sidebar-link" :href="'/scripts#'+selectedPlatform">Scripts</a>
          <a purpose="sidebar-link" class="active" :href="'/os-settings#'+selectedPlatform">OS settings</a>
        </div>
        <div class="d-flex d-lg-none">
          <div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between align-items-center" @click="clickOpenTableOfContents()">
            <div><p>OS settings</p></div>
            <div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
          </div>
        </div>
        <div purpose="content">
          <div purpose="page-headline">
            <h1>OS settings</h1>
            <p>In Fleet, you can restrict or preset any OS setting that's supported by popular MDMs, like Jamf and Intune.</p>
          </div>
          <div purpose="platform-content" v-if="selectedPlatform === 'apple'">
            <ul>
              <li><p>You can use <a href="https://imazing.com/" target="_blank">iMazing</a> profile editor to create, edit, and sign Apple configuration profiles.</p></li>
              <li><p>Check out Fleet’s <a href="/vitals/battery#apple">built-in checks</a> for Mac.</p></li>
              <li><p>View the complete <a href="https://developer.apple.com/business/documentation/Configuration-Profile-Reference.pdf" target="_blank">Apple reference</a>.</p></li>
              <li><p>Need more help? join us in the <a href="/support">support channel</a>.</p></li>
            </ul>
          </div>
          <div purpose="platform-content" v-if="selectedPlatform === 'windows'">
            <ul>
              <li><p>Check out Fleet’s <a href="/vitals/battery#windows">built-in checks</a> for Windows.</p></li>
              <li><p>View the complete <a href="https://learn.microsoft.com/en-us/windows/client-management/mdm/" target="_blank">Windows docs</a>.</p></li>
              <li><p>Need more help? join us in the <a href="/support">support channel</a>.</p></li>
            </ul>
          </div>
          <div purpose="platform-content" v-if="selectedPlatform === 'linux'">
            <ul>
              <li><p>Most admins like to use scripts for the many flavors of Linux. See the baked-in <a href="/policies">Linux controls</a> available with Fleet.</p></li>
              <li><p>Check out Fleet’s <a href="/vitals/disk-encryption-linux#linux">built-in checks</a> for Linux.</p></li>
              <li><p>Need more help? join us in the <a href="/support">support channel</a>.</p></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div purpose="table-of-contents-modal">
    <modal purpose="table-of-contents-modal" v-if="modal === 'table-of-contents'" @close="closeModal()">
      <p purpose="mobile-table-of-contents-header"><strong>Controls</strong></p>
        <div purpose="table-of-contents" class="w-100">
          <div purpose="modal-links">
            <a class="d-block" purpose="modal-nav-link" href="/mdm-commands">MDM commands</a>
            <a class="d-block active" purpose="modal-nav-link" href="/scripts">Scripts</a>
            <a class="d-block" purpose="modal-nav-link" href="/os-settings">OS settings</a>
          </div>
        </div>
    </modal>
  </div>
  <signup-modal></signup-modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
